<template>
  <div class="login">

    <nav-bar class="nav-bar">
      <div class="left" slot="left" @click="toProfile">
        <span class="iconfont icon-arrow"></span>
      </div>
    </nav-bar>
    <div class="login-form">
      <div class="title">FT外卖</div>
      <ul class="login-type">
        <li
        v-for="(item, index) in ['短信登录', '密码登录']" :key="index" 
        :class="{liActive: currentIndex == index}"
        @click="changeIndex(index)">
        {{item}}
        </li>
      </ul>

      <section v-show="currentIndex == 0" class="login-form-sms">
        <div class="input">
          <input type="text" v-model="phone" placeholder="请输入手机号">
          <button class="sms-code" 
            :disabled="disabled" @click="SMSCode">{{timeMessage}}</button>
        </div>
        <div class="input">
          <input type="text" v-model="verifyCode" placeholder="请输入验证码">
        </div>
      </section>

      <section v-show="currentIndex == 1" class="login-form-pwd">
        <div class="input">
          <input type="text" v-model="phone" placeholder="请输入手机号/用户名">
        </div>

        <div class="input pwd-area">
          <input type="password" ref="inputPwd" v-model="pwd" placeholder="请输入密码">
          <span @click="changeShowPWd" 
            :class="{'icon-pwd':true,'iconfont':true,
            'icon-yanjing_xianshi': !isShowPwd,
            'icon-yanjing_yincang': isShowPwd}"></span>
        </div>
        <div class="verify-code">
          <div class="input" >
            <input type="text" v-model="verifyCode" placeholder="请输入验证码">
          </div>
          <span>
            <img src="./images/verify-code.webp" alt="">
          </span>
        </div>
      </section>
      <button class="btn">登录</button>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
export default {
  name: 'Login',
  data() {
    return {
      currentIndex: 0,
      phone: '',
      pwd: '',
      verifyCode:  '',
      smsCode: '',
      disabled: true,
      isSending: false,
      timeRemaining: 60,
      timeMessage: '获取验证码',
      isShowPwd: false
    }
  },
  components: {
    NavBar
  },
  computed: {
  },
  watch: {
    phone: {
      handler() {
        if(this.isSending) return // 如果正在发送中，不做判读
        let ok = /^[0-9]{11}$/.test(this.phone)
        if(ok){
          this.disabled = false
        }else {
          this.disabled = true
        }
      }
    }
  },
  methods: {
    toProfile() {
      this.$router.replace('/profile')
    },
    changeIndex(index) {
      this.currentIndex = index
    },
    changeShowPWd() {
      this.isShowPwd = !this.isShowPwd
      this.$refs.inputPwd.type = this.isShowPwd ? 'text' : 'password'
    },
    SMSCode() {
      this.isSending = true
      this.disabled = true

      /* 请求验证码 */

      /* 剩余时间 */
      let timer = setInterval(() => {
        this.timeRemaining--
        this.timeMessage = '还剩' + this.timeRemaining + 's'
      }, 1000);

      let timeout = setTimeout(() => {
        clearInterval(timer)
        this.timeMessage = "发送验证码"
        this.timeRemaining = 60
        this.isSending = false
        this.disabled = false
        if(this.phone.length != 11) this.disabled = true
        clearTimeout(timeout)
      },60000)  
    }
  }
}
</script>

<style lang="less" scoped>
ul {
  list-style: none;
}

.nav-bar {
  color: #000!important;
  background-color: #fff!important;
  .left {
    padding-left: 16px;
  }
}
.login-form {
  width: 300px;
  margin: 0 auto;
  margin-top: 78px;
  text-align: center;
  font-weight: 700;
  .title {
    margin-bottom: 16px;
    font-size: 48px;
    color: #FF8097;
  }
}

.login-type {
  display: flex;
  justify-content: center;
  li:nth-child(n) {
    margin: 0 18px;
    padding: 4px 0;
    font-size: 16px;
  }
}

.liActive {
  color: #FF8097;
  border-bottom: 1px solid #FF8097;
}

.login-form-sms,
.login-form-pwd {
  width: 100%;
  margin-top: 20px;

}

.input {
  position: relative;
  width: 290px;
  height: 48px;
  margin: 8px auto;
  padding: 0 12px;
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(100, 100, 100, .2);
  border-radius: 12px;
  color: #777;
  line-height: 48px;
 
  input {
    width: 100%;
    border: none;
    outline: none;
  }
}

/* 清除input输入框中 文本类型的叉叉和密码狂类型的小眼睛 */
::-ms-clear,
::-ms-reveal {
  display: none;
}

.sms-code {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding-left: 12px;
  border: none;
  background: none;
  border-left: 1px solid #ccc;
}

.pwd-area {
  .icon-pwd {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);

    font-size: 24px;
  }
}

.verify-code {
  display: flex;
  width: 290px;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  .input {
    flex: 2;
  }
  & span {
    flex: 1;
    height: 48px;
    padding-left: 8px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 12px;
    }
  }
}

.btn {
  width: 290px;
  height: 46px;
  margin: 16px auto;
  outline: none;
  border: none;

  font-size: 18px;
  color: #fff;
  border-radius: 12px;
  background-color: #FF8097;
}
</style>